<!--上面导航以及搜索框-->
<template>
  <div class="seachNav">
    <div>
      <span class="icon iconfont">&#xe63b;</span>
      <span @click="jumpList">商品分类</span>
    </div>

    <ul>
      <li
        v-for="(item,index) in nav"
        :key="item.id"
        @click="jump(index)"
        :class="{active:index == navindex, active1: index == 3}"
      >{{ item.name }}
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    name: "goodsNav",
    props: {
      navindex: Number
    },

    methods: {
      jumpList() {
        this.$router.push({
          name: 'productList'
        })
      },

      jump(index) {
        console.log(index)
        switch (index) {
          case 0:
            this.$router.push("/")
            break
          case 1:
            this.$router.push({
              name: 'GotoFudi',
              params: {
                id: 0
              }
            })
            break
          case 2:
            this.$router.push("/brandWorld")
            break
          case 3:
            this.$router.push("/preferentialMarket")
            break
          case 4:
            this.$router.push({
              name: "purchaseCenter",
              params: {
                sonshow: 1
              }
            })
            break
          case 5:
            this.$router.push('/accountService')
            break
          case 6:
            this.$router.push({
              name: 'webBulletin',
              params: {
                id: 2
              }
            })
            break
          case 7:
            this.$router.push("/FamousMechanics")
            break

          default:
            console.log("没有点击事件")
        }
      }
    },

    computed: {
      nav() {
        return this.$store.state.homeNav
      }
    }
  }
</script>
<style lang="scss" scoped>
  .seachNav {
    width: 1200px;
    height: 38px;
    margin: auto;
    display: flex;
    flex-direction: row;
    align-items: center;

    div {
      width: 212px;
      height: 38px;
      line-height: 38px;
      color: #ffffff;
      background-color: #0a83e7;
      font-size: 16px;

      span:first-child {
        padding: 0 14px;
        font-size: 16px;
      }

      span:last-child {
        font-weight: 600;
        letter-spacing: 1px;
        cursor: pointer;
      }
    }

    ul {
      width: 988px;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;

      li {
        font-size: 16px;
        font-weight: bold;
        user-select: none;
        cursor: pointer;
        transition: all 0.3s ease-in-out;
        letter-spacing: 1px;

        &:hover {
          color: #0a83e7;
        }
      }

      .active {
        color: #0a83e7;
      }

      .active1 {
        color: #f40;
        transition: all .3s ease-in-out;

        &:hover {
          color: #0a83e7;
        }
      }
    }
  }
</style>
